<template>
	<view class="order-item">
		<view class="order-item-box">
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption" :fixed="false" :bottom="0">
				<view class="spread-order">
					<view class="order-lists">
						<view v-for="(item, index) in orderList" :key="item.sn" 
						class="order-item bg-white m-t-20">
							<view class="order-header flex row-between">
								<view>{{$zhTran('订单编号')}}：{{ item.sn }}</view>
								<view class="static sm"
									:style="{ color: item.status == 1 ? '#F95F2F' : item.status == 2 ? '#00c735' : '#999999' }">
									{{ item.status_desc }}
								</view>
							</view>
							
							<distribuitem
							:orderitem="item"
							></distribuitem>
							
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
		<w-jishuzhichi class="jishuzhichi-nodata" />
	</view>
</template>

<script>
	import {
		DistributionOrderEnum
	} from "@/utils/enum";
	import {
		apiDistributionOrder
	} from "@/api/user";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item";
	
	import distribuitem from '@/bundle/components/distribuitem.vue'
	
	export default {
		components: {
			distribuitem,
			
		},
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				orderList: [],
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: this.$getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
						tip: this.$zhTran('暂无分销订单~'), // 提示
						fixed: true
					}
				},
				confirmDialog: false,
				price_symbol: '￥'
			};
		},

		props: {
			type: {
				type: Number | String,
				default: DistributionOrderEnum['ALL']
			},
			index:{
				type: Number | String,
				default: 0,
			},
			navindex:{
				type: Number | String,
				default: 0,
			},
			
		},
		watch: {
			index(newVal){
				if(newVal == this.navindex){
					let info = {
						num: 1,
						size: 10,
					}
					this.upCallback(info)
				}
			},
		},
		methods: {
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let {
					type,
				} = this;
				apiDistributionOrder({
					page_size: pageSize,
					page_no: pageNum,
					status: type
				}).then((data) => {
					if (page.num == 1) this.orderList = [];
					let curPageData = data.lists;
					const curPageLen = curPageData.length;
					this.orderList = this.orderList.concat(curPageData);
					this.orderList = this.$zhTran(this.orderList)
					this.mescroll.endSuccess(curPageLen, data.count);
					this.price_symbol = data.price_symbol
				})
			},
		
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.order-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.order-item {
			flex: 1;
			min-height: 0;

			.order-item-box {
				height: calc(100% - 90rpx - constant(safe-area-inset-bottom));
				height: calc(100% - 90rpx - env(safe-area-inset-bottom));
			}
		}
	}

	.spread-order {
		.order-lists {
			padding: 0 20rpx;

			.order-item {
				border-radius: 14rpx;

				.order-header {
					padding: 20rpx 30rpx;
					border-bottom: $-solid-border;

					.status {
						color: #F95F2F;
					}
				}

				.order-content {
					padding: 20rpx 30rpx 20rpx 20rpx;
					border-bottom: $-solid-border;

					.order-goods-info {
						text-align: left;
						flex: 1;

						.name {
							line-height: 36rpx;
						}

						.pre-income {
							margin-top: 8rpx;
						}
					}
				}

				.order-footer {
					padding: 20rpx 30rpx 20rpx 20rpx;
				}
			}
		}
	}
</style>